ol
  li 
    :markdown
      Include [Angular.js](http://angularjs.org) in your project

    pre.prettyprint
      = '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>'

    :markdown
      Optionally include [Bootstrap](http://getbootstrap.com) CSS for theming

    pre.prettyprint
      = '<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">'

  li 
    span Install angular-xeditable via 
    a(href="http://bower.io", target="_blank") bower
    span  or  
    a(href="zip/angular-xeditable-"+version+".zip") download latest zip    
    pre.prettyprint bower install angular-xeditable 


  li Include angular-xeditable into your project
    pre.prettyprint
      = '<link href="bower_components/angular-xeditable/dist/css/xeditable.css" rel="stylesheet">\n'
      = '<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>'

  li Define angular app and add "xeditable" to dependencies
    pre.prettyprint
      = '<html ng-app="app">'
    pre.prettyprint var app = angular.module("app", ["xeditable"]);

  li Set theme in app.run:
    pre.prettyprint.
      app.run(function(editableOptions) {
        editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
      });

  li Markup element that should be editable 
    pre.prettyprint(ng-non-bindable)
      = '<div ng-controller="Ctrl">\n'
      = '  <a href="#" editable-text="user.name">{{ user.name || "empty" }}</a>\n'
      = '</div>'

  li Define controller
    pre.prettyprint.
      app.controller('Ctrl', function($scope) {
        $scope.user = {
          name: 'awesome user'
        };  
      });
  li Enjoy!
    div(style="padding-top: 5px")    
      a.btn.btn-success(href="starter", target="_blank") View starter template
      a.btn.btn-primary(href="zip/angular-xeditable-starter.zip", style="margin-left: 10px") Download starter zip
